<template>
  <div class="widget_settings_pro">
    <ele-form-section
        labelPosition="left"
        v-model="formData"
        :sections="sections"
    >
      <template v-slot:product="{ desc, formData }">
        <div class="selected" v-if="formData.product.id !== 0">
          <span class="value"><img :src="formData.product.mainImage" height="30px" alt="">{{ formData.product.spuName }}</span>
          <span class="icons">
            <i class="el-icon-sort" @click="isOpen = true"></i>
            <i class="icon_custom el-icon-delete" @click="delProduct"></i>
          </span>
        </div>
        <el-button v-else type="primary" size="small" @click="isOpen = true"
                   style="width: 260px;margin: auto;display: block">选择商品
        </el-button>
      </template>
      <template v-slot:form-btn="{ btns }">
        <div class="rest-btn" @click="reset">
          <svg-icon icon-class="reset-settings"></svg-icon>
          重置配置
        </div>
      </template>
    </ele-form-section>
    <product-dialog :productDialogVisible="isOpen" @save="getSelectData" @close="isOpen = false"></product-dialog>
  </div>
</template>

<script>
import productDialog from '_c/Dialog/product_dialog';
import {debounce, deepClone} from '@/utils/utils';

export default {
    name: 'featureProduct',
    components: {productDialog},
    props: {
        value: {
            type: Object,
            default: () => ({})
        },
        resetStyle: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        value: {
            handler (newVal, oldVal) {
                this.formData = JSON.parse(newVal.styleJson);
            },
            immediate: false,
            deep: true
        },
        formData: {
            handler (newVal, oldVal) {
                this.pageCount++;
                if (this.pageCount !== 1) {
                    this.setData();
                }
            },
            immediate: false,
            deep: true
        }
    },
    data () {
        return {
            pageCount: 1,
            activeNames: [],
            formData: this.value ? JSON.parse(this.value.styleJson) : {},
            loadingTable: false,
            isOpen: false,
            uploadPath: process.env.VUE_APP_BASE_API + '/upload-file',
            sections: [
                {
                    title: '商品信息',
                    formDesc: {
                        'product': {},
                        // 'is_subheading_show': {
                        //     label: '显示副标题',
                        //     type: 'switch'
                        // },
                        'is_price_show': {
                            label: '显示售价',
                            type: 'switch',
                            break: true
                        },
                        'button_label': {
                            type: 'input',
                            label: '按钮文案'
                        }
                    }
                },
                {
                    title: '图片展示规则',
                    formDesc: {
                        'layout': {
                            type: 'select',
                            label: 'PC图片位置',
                            options: [
                                {text: '居左', value: 'left'},
                                {text: '居右', value: 'right'}
                            ]
                        }
                    }
                },
                {
                    title: '间距留白',
                    formDesc: {
                        'module_layout': {
                            type: 'ele-spacing'
                        }
                    }
                }
            ],
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)'
            ]
        };
    },
    methods: {
        handleTableList () {
            this.isOpen = true;
        },
        getSelectData (data) {
            this.formData.product = data;
        },
        delProduct () {
            this.formData.product = {id: 0};
        },
        reset () {
            this.pageCount = 0;
            if (!('module_layout' in this.value)) {
                this.$set(this.value, 'module_layout', {
                    left: 0,
                    top: 0,
                    right: 0,
                    bottom: 0
                });
            }
            this.$emit('resetData', this.value);
        },
        setData: debounce(function () {
            let data = deepClone(this.value);
            data.styleJson = JSON.stringify(this.formData);
            this.$store.commit('SET_PROJECT_DATA', data);
        }, 600)
    },
    mounted () {
        if (!('module_layout' in this.formData)) {
            this.$set(this.formData, 'module_layout', {
                left: 0,
                top: 0,
                right: 0,
                bottom: 0
            });
        }
    }
};
</script>

<style scoped lang="scss">
.form-item-inline {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  color: #606266;
  height: 32px;
  margin-bottom: 10px;
}

.editForm {
  margin-bottom: 10px;

  .form-item {
    margin-top: 10px;

    label {
      display: block;
      height: 32px;
      line-height: 32px;
    }
  }

  ::v-deep .el-collapse-item__content {
    border: 1px solid #d8deec;
    border-top: 0;
    padding-left: 10px;
  }
}

.addBtn {
  width: 100%;
}
.selected{
  width: 260px;
  background-color: #eef0f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .icon{
    i:first-child{
      margin-right: 10px;
    }
  }
  .value, .icons{
    display: flex;
    align-items: center;
  }
  .value {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    width: 160px;
    img{
      margin-right: 12px;
    }
  }
  .icons{
    padding-right: 12px;
    .el-icon-sort{
      margin-right: 12px;
    }
  }
}
</style>
